<template>
  <div class="main">
    <template v-for="(val, i) in titles" :key="i">
      <div @click="go(i)" class="item" :class="{ active: i === currentIndex }">{{ val }}</div>
    </template>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
const cxt = getCurrentInstance()//相当于vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus
defineProps({
  titles: {
    default: [1, 2, 3, 4, 5, 6]
  }
})
const emit = defineEmits(['tabClick'])
let currentIndex = ref(0)
function go(i) {
  currentIndex.value = i;
  emit('tabClick', i)
}
bus.on('updates', val => {
  currentIndex.value = val;
  // console.log(val);
})
</script>
<style lang="less" scoped>
.main {
  display: flex;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #fff;
  justify-content: space-around;

  .item {
    padding: 0 5px;
    transition: all .1s;
  }

  .active {
    border-bottom: 3px solid #ff9645;
  }
}
</style>
